<template>
    <lightning-card title="Lightning Data Service" icon-name="custom:custom42">
        <template lwc:if={contact.data}>
            <div class="slds-text-align_center slds-var-m-around_medium">
                The best place to see the Lightning Data Service components in
                action is on a record page.
                <p class="slds-var-m-around_medium">
                    <lightning-button
                        label="Take me there!"
                        onclick={navigateToContact}
                    ></lightning-button>
                </p>
                <p>
                    The Lightning Data Service components are in the right
                    sidebar.
                </p>
                <p>
                    (You can also select a contact in the&nbsp;
                    <strong>Contacts</strong> tab)
                </p>
            </div>
        </template>
        <template lwc:elseif={contact.error}>
            <c-error-panel errors={contact.error}></c-error-panel>
        </template>
    </lightning-card>
</template>
